---
type: integration
title: '@astrojs/preact'
description: '@astrojs/preactフレームワークインテグレーションを使用して、Astroプロジェクトのコンポーネントサポートを拡張する方法を学びます。'
sidebar:
  label: Preact
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/'
category: renderer
i18nReady: false
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import Since from '~/components/Since.astro';

この[**Astroインテグレーション**][astro-integration]は、[Preact](https://preactjs.com/)コンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。

## なぜPreactなのか

Preactは、ウェブ用のインタラクティブなUIコンポーネントを構築できるライブラリです。JavaScriptを使用してサイトにインタラクティブな機能を構築したい場合、ブラウザAPIを直接使用する代わりに、コンポーネント形式を好むかもしれません。

Preactは、以前にReactを使用したことがある場合にも優れた選択肢です。PreactはReactと同じAPIを提供しますが、はるかに小さい3kBのパッケージです。`compat`設定オプション（下記参照）を使用して、多くのReactコンポーネントのレンダリングもサポートしています。

**このインテグレーションを使用する前にPreactについてもっと知りたいですか**
彼らのウェブサイトのインタラクティブなチュートリアルである[「Preactを学ぶ」](https://preactjs.com/tutorial)をチェックしてください。

## インストール

Astroには、公式インテグレーションのセットアップを自動化するための`astro add`コマンドが含まれています。もしよろしければ、[手動でインテグレーションをインストール](#手動インストール)できます。

`@astrojs/preact`をインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add preact
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add preact
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add preact
  ```
  </Fragment>
</PackageManagerTabs>

問題が発生した場合は、[GitHubで報告してください](https://github.com/withastro/astro/issues)。そして、以下の手動インストール手順を試してください。

### 手動インストール

まず、`@astrojs/preact`パッケージをインストールします。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/preact
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/preact
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/preact
  ```
  </Fragment>
</PackageManagerTabs>

ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時に`Cannot find package 'preact'`（または同様の）警告が表示される場合は、Preactをインストールする必要があります。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install preact
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add preact
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add preact
  ```
  </Fragment>
</PackageManagerTabs>

次に、`integrations`プロパティを使用して、インテグレーションを`astro.config.*`ファイルに適用します。

```js title="astro.config.mjs" ins={2} ins="preact()"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  // ...
  integrations: [preact()],
});
```

そして、次のコードを`tsconfig.json`ファイルに追加します。

```json title="tsconfig.json" ins={5-8}
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}
```

## 使い方

Astroで最初のPreactコンポーネントを使用するには、[UIフレームワークのドキュメント][astro-ui-frameworks]にアクセスしてください。以下について探求します。

* 📦 フレームワークコンポーネントがどのように読み込まれるか
* 💧 クライアントサイドハイドレーションのオプション
* 🤝 フレームワークを混在させてネストする機会

インテグレーションの詳細については、[Astroインテグレーションのドキュメント][astro-integration]も確認してください。

## 設定

Astro Preactインテグレーションは、Preactコンポーネントのレンダリング方法を処理し、独自のオプションがあります。これらは、プロジェクトのインテグレーション設定が存在する`astro.config.mjs`ファイルで変更します。

基本的な使用法では、Preactインテグレーションを設定する必要はありません。

### compat

`preact/compat`を有効にできます。これは、Reactのより大きなライブラリをユーザーのWebブラウザーにインストールまたは配布することなく、ReactコンポーネントをレンダリングするためのPreactの互換性レイヤーです。

そのためには、Preactインテグレーションにオブジェクトを渡し、`compat: true`を設定します。

```js title="astro.config.mjs" "compat: true"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  integrations: [preact({ compat: true })],
});
```

`compat`オプションを有効にすると、Preactインテグレーションはプロジェクト内のPreactコンポーネントだけでなくReactコンポーネントもレンダリングし、Preactコンポーネント内でReactコンポーネントをインポートできます。詳細については、Preactのウェブサイトの[「Preactへの切り替え（Reactから）」](https://preactjs.com/guide/v10/switching-to-preact)を参照してください。

Reactコンポーネントライブラリをインポートする場合、`react`および`react-dom`の依存関係を`preact/compat`としてスワップアウトするために、[`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides)を使用できます。

```json title="package.json"
{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}
```

それぞれのオーバーライド機能については、[`pnpm`オーバーライド](https://pnpm.io/package_json#pnpmoverrides)および[`yarn`解決](https://yarnpkg.com/configuration/manifest#resolutions)のドキュメントを確認してください。

:::note
現在、`compat`オプションは、ESMとしてコードをエクスポートするReactライブラリでのみ機能します。ビルド時にエラーが発生した場合は、`astro.config.mjs`ファイルの`vite.ssr.noExternal: ['the-react-library']`にライブラリを追加してみてください。
:::

### devtools

<p><Since pkg="@astrojs/preact" v="3.3.0" /></p>

`preact()`インテグレーション設定に`devtools: true`を持つオブジェクトを渡すことで、開発中に[Preact devtools](https://preactjs.github.io/preact-devtools/)を有効にできます。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  // ...
  integrations: [preact({ devtools: true })],
});
```

## オプション

### 複数のJSXフレームワークの組み合わせ

同じプロジェクトで複数のJSXフレームワーク（React、Preact、Solid）を使用している場合、Astroは各コンポーネントにどのJSXフレームワーク固有の変換を使用するかを決定する必要があります。プロジェクトにJSXフレームワークインテグレーションを1つしか追加していない場合は、追加の設定は必要ありません。

`include`（必須）および`exclude`（オプション）設定オプションを使用して、どのファイルがどのフレームワークに属するかを指定します。使用している各フレームワークの`include`にファイルおよび/またはフォルダの配列を指定します。ワイルドカードを使用して、複数のファイルパスを含めることができます。

インクルードの指定を容易にするために、共通のフレームワークコンポーネントを同じフォルダ（例えば、`/components/react/`および`/components/solid/`）に配置することをお勧めしますが、必須ではありません。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';

export default defineConfig({
  // あらゆる種類のコンポーネントをサポートするために多くのフレームワークを有効にします。
  // 単一のJSXフレームワークのみを使用している場合は、`include`は必要ありません！
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});
```

## 例

* [Astro Preactの例](https://github.com/withastro/astro/tree/latest/examples/framework-preact)は、AstroプロジェクトでインタラクティブなPreactコンポーネントを使用する方法を示しています。
* [Astro Nanostoresの例](https://github.com/withastro/astro/tree/latest/examples/with-nanostores)は、Astroプロジェクトで異なるコンポーネント間、さらには異なるフレームワーク間で状態を共有する方法を示しています。

[astro-integration]: /ja/guides/integrations-guide/

[astro-ui-frameworks]: /ja/guides/framework-components/
